<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title></title>
		<style type="text/css">
			body{font-family:Arial;}	
			
			
			#block{
				position:absolute;
				left:150px;
				top:150px;
				width:100px;
				height:100px;
				border:solid black;
				background:blue;
				color:white;
				padding:30px;
				font-weight:bold;
			}
			
		</style>
		<script type="text/javascript" src="../firebug/firebug.js"></script>
		<script type="text/javascript" src="event.js"></script>
		<script type="text/javascript">

				function $(o){return typeof o=="string"?document.getElementById(o):o;}




					
				window.onload=function(e){

					var o = $("block");

					Event.add("UP", function(e){
						this.style.top = (this.offsetTop - 15) + "px";
					},document);
					
					Event.add("DOWN", function(e){
						this.style.top = (this.offsetTop + 15) + "px";
					},document);
					
					Event.add("LEFT", function(e){
						this.style.left = (this.offsetLeft - 15) + "px";
					},document);
					
					Event.add("RIGHT", function(e){
						this.style.left = (this.offsetLeft + 15) + "px";
					},document);
					
					Event.add("NUMBERS", function(e, i){
						var c = ["#000000","#FF0000","#00FF00","#0000FF","#FFFF00","#00FFFF","#FF00FF","#C0C0C0","#FFFFFF","#FFFFA0"]
						this.style.backgroundColor = c[i];
					},document);
					
					Event.add("ENTER",function(e){
						Event.fire("click",$("paragraph"))
					},document)
					
					
					
				}
		
		</script>

	</head>
	<body onclick="console.log(this,event);">
		<div class="top" onclick="console.log(this,event);">
			<h2>Events</h2>
			<p id="paragraph" onclick="console.log(this,event);">Use UP, DOWN, LEFT and RIGHT arrows</p>
		</div>
	   
		<div id="block">[BLOCK]</div>
	   
	</body>
</html>
